// Various special and one-off effects.

.background-19028 {
  // homepage hero -- bigger than title backgrounds
  background-image: url("assets/img19028-cropped-2006x704.jpg");
  background-size: cover;
  background-position: top right;
}

.background-19023 {
  background-image: url("assets/img19023-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top right;
}

.background-19024 {
  background-image: url("assets/img19024-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top right;
}

.background-19025 {
  background-image: url("assets/img19025-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top left;
}

.background-19026 {
  background-image: url("assets/img19026-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top left;
}

.background-19032 {
  background-image: url("assets/img19032-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top left;
}

.background-19036 {
  background-image: url("assets/img19036-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top right;
}

.background-19038 {
  background-image: url("assets/img19038-cropped-1960x256.jpg");
  background-size: cover;
  background-position: top left;
}

div.hero {
  font-size: 1.5em;

  div.maxwidth {
    position: relative; // to allow the button positioning

    p {
      margin: 0;
      padding: 1rem 0 0 0;
      line-height: 1.2;
    }

    .button-container {
      display: flex;
      justify-content: right;
      width: 100%;
      margin-top: 3rem;

      a {
        display: inline-block;
        margin: 0.3rem;

        padding: 0.2rem 0.3rem;
        border: double #fff 2px;
        color: $card-button-link-color;
        font-size: 50%;
        font-weight: 700;
        text-decoration: none;

        @include border-radius(4px);

        &:hover {
          background: $card-button-color;
          border-color: $card-edge-color;
        }
      }
    }
  }
}

.flex-videoteaser {
  margin: 1rem 0;

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;

  img {
    flex: 1 1;
    margin: 0.5rem;
  }

  div {
    flex: 1 1;
    margin: 0.5rem;
    max-width: 18rem;
  }
}

.flex-skinny {
  max-width: 65%;
  margin-left: auto;
  margin-right: auto;
}